@let confirmRequested = confirmRequested$ | async;

<div
  class="h-100"
  ngbDropdown
  autoClose="outside"
  (openChange)="onChange($event)"
  #dropdownInstance="ngbDropdown"
  [id]="idPrefix() + '-dropdown'"
>
  <button
    class="btn dropdown-toggle h-100 d-flex align-items-center"
    [ngClass]="{
      'btn-custom': label(),
      'btn-link': icon(),
      'btn-icon': icon(),
      'dropdown-toggle-icon': icon(),
      'dropdown-toggle-no-caret': icon(),
      'hover-fade': iconFaded(),
      'py-0': noYPadding()
    }"
    type="button"
    ngbDropdownToggle
    (click)="$event.stopPropagation()"
  >
    @if (icon()) {
      <app-svg [icon]="icon()"></app-svg>
    }
    @if (label()) {
      <div class="dropdown-toggle-label">{{ label() }}</div>
    }
  </button>
  <div
    class="dropdown-menu"
    [ngClass]="{ 'dropdown-menu-height-content': menuHeightFitContent() }"
    style="max-width: 40vw"
    [id]="idPrefix() + '-dropdown-menu'"
    ngbDropdownMenu
  >
    <div class="dropdown-menu-content">
      @for (item of items(); track $index) {
        @if (isSeparator(item)) {
          <hr class="dropdown-divider" />
        } @else if (isItem(item)) {
          @let itemLabel =
            typeof item.label === 'function'
              ? (item.label() | async)
              : item.label;
          @let disabled = item.disabled$ && item.disabled$(payload()) | async;
          @let hidden = item.hidden$ && item.hidden$(payload()) | async;
          @let disabledLabel =
            item.disabledLabel$ && item.disabledLabel$(payload()) | async;
          @let needConfirm = item.twoSteps && confirmRequested.enabled;

          @if (!hidden) {
            <button
              class="btn dropdown-item d-flex"
              [ngClass]="{
                'text-danger': needConfirm
              }"
              (click)="itemClicked(item, dropdownInstance)"
              [disabled]="disabled"
            >
              <span class="text-truncate">
                @if (item.icon) {
                  <app-svg
                    [icon]="needConfirm ? item.confirmIcon : item.icon"
                    class="pe-2"
                  >
                  </app-svg>
                }
                {{
                  needConfirm
                    ? item.confirmLabel
                    : disabled
                      ? disabledLabel || itemLabel
                      : itemLabel
                }}
                @if (item.subLabel) {
                  <br />
                  <small class="text-muted">{{ item.subLabel }}</small>
                }
              </span>
            </button>
          }
        }
      }
    </div>
  </div>
</div>
